Syntax

                  ListView(
                      children: <Widget>[
                        //widget items
                      ],
                    )

                  

OR

                  ListView(
                    children: [
                      child widget1,
                      child widget2,
                      .....
                    ],
                    scrollDirection: Axis.horizontal,
                  )

                  

Using custom widget

                import 'package:flutter/material.dart';
    
    void main() {      
      runApp(MyApp());
    }
    
    // the root widget of our application
    class MyApp extends StatelessWidget {
    
      @override
      Widget build(BuildContext context) {
    
       
        return MaterialApp(   
     
          home: Scaffold(    
            
            appBar: AppBar(             
              title: Text("Exploring Widgets"),
            ),   
           
            body: myWidget(),    
          ),
        );
      }
    }
    
    Widget myWidget() {
      return ListView.builder(
        padding: EdgeInsets.all(16.0),
        // spacing of the rows
        itemExtent: 30.0,
        // provides an infinite list
        itemBuilder: (BuildContext context, int index) {
          return Text('Row $index');
        },
      );
    }

  

On tap

Widget myWidget() {
      return ListView.builder(
        itemBuilder: (BuildContext context, int index) {
          return ListTile(
            title: Text('Row $index'),
            onTap: () {
              // do something
            },
          );
        },
      );
    }

  

Listview with container

                
                import 'package:flutter/material.dart';
 
 void main() => runApp(MyApp());
  
 class MyApp extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return MaterialApp(
       title: 'Flutter Demo',
       theme: ThemeData(
         primarySwatch: Colors.blue,
       ),
       home: Scaffold(
         appBar: AppBar(
           title: Text('TutorialKart - Flutter ListView'),
         ),
         body: ListView(
           children: <Widget>[
             Container(
               height: 50,
               color: Colors.lime[800],
               child: const Center(child: Text('Apple')),
             ),
             Container(
               height: 50,
               color: Colors.lime[600],
               child: const Center(child: Text('Banana')),
             ),
             Container(
               height: 50,
               color: Colors.lime[400],
               child: const Center(child: Text('Mango')),
             ),
             Container(
               height: 50,
               color: Colors.lime[200],
               child: const Center(child: Text('Orange')),
             ),
           ],
         ),
       ),
     );
   }
 }
                

Listview with Card

                ListView(
                    children: [
                      Card(
                        child: ListTile(
                          title:Text('List Item 1') ,
                        )
                      ),
                      Card(
                        child: ListTile(
                          title:Text('List Item 2') ,
                        ),
                      ),
                      Card(
                        child: ListTile(
                          title:Text('List Item 3') ,
                        )
                      ),
                    ],
                    padding: EdgeInsets.all(10),
                  )

                  

Listview with listTile

                  ListView(
                    children: [

                          ListTile(
                            leading: CircleAvatar(
                              backgroundColor: Colors.white,
                              backgroundImage: AssetImage('images/avatar.png'),
                            ),
                            title: Text(
                              'John Judah',
                            ),
                            subtitle: Text('2348031980943'),
                            trailing: Icon(Icons.keyboard_arrow_right),
                            onTap: () {
                              Text('Another data');
                            },
                    ),
                    
                    new Divider(
                      height: 1.0,
                      indent: 1.0,
                    ),

                    ListTile(
                      leading: CircleAvatar(
                        backgroundColor: Colors.white,
                        backgroundImage: AssetImage('images/avatar_purple.png'),
                      ),
                      title: Text('Bisola Akanbi'),
                      subtitle: Text('2348031980943'),
                      trailing: Icon(Icons.keyboard_arrow_right),
                      onTap: () {
                        Text('Another data');
                      },
                      onLongPress: () {
                        Text('Data');
                      },
                    ),

                    new Divider(
                      height: 1.0,
                      indent: 1.0,
                    ),

                    ListTile(
                      leading: CircleAvatar(
                        backgroundColor: Colors.white,
                        backgroundImage: AssetImage('images/avatar_brown.png'),
                      ),
                      title: Text('Eghosa Iku'),
                      subtitle: Text('2348031980943'),
                      trailing: Icon(Icons.keyboard_arrow_right),
                    ),

                    new Divider(
                      height: 1.0,
                      indent: 1.0,
                    ),

              ]
          )

          

Data looping in listview

          // main.dart
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        // Remove the debug banner
        debugShowCheckedModeBanner: false,
        title: 'Kindacode.com',
        theme: ThemeData(
          primarySwatch: Colors.green,
        ),
        home: HomePage());
  }
}

class HomePage extends StatelessWidget {
  // Generate some dummy data
  final List<Map<String, dynamic>> _items = List.generate(
      100,
      (index) =>
          {"id": index, "title": "Item $index", "subtitle": "Subtitle $index"});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Kindacode.com'),
        ),
        body: ListTileTheme(
          contentPadding: const EdgeInsets.all(15),
          iconColor: Colors.red,
          textColor: Colors.black54,
          tileColor: Colors.yellow[100],
          style: ListTileStyle.list,
          dense: true,
          child: ListView.builder(
            itemCount: _items.length,
            itemBuilder: (_, index) => Card(
              margin: const EdgeInsets.all(10),
              child: ListTile(
                title: Text(_items[index]['title']),
                subtitle: Text(_items[index]['subtitle']),
                trailing: Row(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    IconButton(onPressed: () {}, icon: const Icon(Icons.edit)),
                    IconButton(
                        onPressed: () {}, icon: const Icon(Icons.delete)),
                    IconButton(
                        onPressed: () {}, icon: const Icon(Icons.add_box)),
                  ],
                ),
              ),
            ),
          ),
        ));
  }
}

                import 'package:flutter/material.dart';

class CustomListView extends StatelessWidget {
  final List<ListItem> items = [
    ListItem(
      title: 'Item 1',
      subtitle: 'Description for Item 1',
      imageUrl: 'https://via.placeholder.com/50', // Replace with your image URL
      iconData: Icons.arrow_forward,
    ),
    ListItem(
      title: 'Item 2',
      subtitle: 'Description for Item 2',
      imageUrl: 'https://via.placeholder.com/50', // Replace with your image URL
      iconData: Icons.arrow_forward,
    ),
    // Add more ListItem objects as needed
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('List with Image and Icon'),
      ),
      body: ListView.builder(
        itemCount: items.length,
        itemBuilder: (BuildContext context, int index) {
          return ListTile(
            leading: Image.network(
              items[index].imageUrl,
              width: 50,
              height: 50,
            ),
            title: Text(items[index].title),
            subtitle: Text(items[index].subtitle),
            trailing: Icon(items[index].iconData),
            onTap: () {
              // Handle item tap
            },
          );
        },
      ),
    );
  }
}

class ListItem {
  final String title;
  final String subtitle;
  final String imageUrl;
  final IconData iconData;

  ListItem({
    required this.title,
    required this.subtitle,
    required this.imageUrl,
    required this.iconData,
  });
}

void main() {
  runApp(MaterialApp(
    debugShowCheckedModeBanner: false,
    home: CustomListView(),
  ));
}